<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>(( province.name )) - 数据分析 | PPYY天气网</title>
    <link rel="stylesheet" href="https://npm.elemecdn.com/element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">

    <el-dialog
      :title="dialogData.name + ' - 天气信息'"
      :visible.sync="dialogVisible"
      width="50%">

        <el-row style="margin-bottom: 10px;">
            <el-col :span="8">
                <span>平均最低温度</span>
                <el-tag type="primary">{{ dialogData.avgMinTemp }}℃</el-tag>
            </el-col>
            <el-col :span="8">
                <span>最低温度中位数</span>
                <el-tag type="success">{{ dialogData.midMinTemp }}℃</el-tag>
            </el-col>
            <el-col :span="8">
                <span>最低温度方差</span>
                <el-tag type="warning">{{ dialogData.varMinTemp }}</el-tag>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <span>平均最高温度</span>
                <el-tag type="primary">{{ dialogData.avgMaxTemp }}℃</el-tag>
            </el-col>
            <el-col :span="8">
                <span>最高温度中位数</span>
                <el-tag type="success">{{ dialogData.midMaxTemp }}℃</el-tag>
            </el-col>
            <el-col :span="8">
                <span>最高温度方差</span>
                <el-tag type="warning">{{ dialogData.varMaxTemp }}</el-tag>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <!-- <div id="myChart" ref="myChart" style="width: 600px; height: 400px;"></div> -->

                <iframe id="myChart"  :src="'/analyse/chart/' + dialogData.id" style="width: 100%; height: 450px; border: none;" scrolling="no"></iframe>

            </el-col>
        </el-row>


    <template slot="footer">
     <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
    </template>
    </el-dialog>

    <h1 style="text-align: center; margin-top: 20px;">
        (( province.name ))一周天气分析
        <span style="font-size: 16px">( (( datePair[0] )) ~ (( datePair[1] )) )</span>
    </h1>
    <h4 style="text-align: center; margin-top: 20px;">(( length )) 个城市</h4>
    <div style="width: 80%; margin: 0 auto;">
        <el-table
                :data="tableData"
                border
                stripe
                style=" margin: 0 auto; margin-bottom: 96px">
            <el-table-column
                    prop="name"
                    label="城市"
                    width="160"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-link type="primary" :href="'/weather/city/' + scope.row.id" target="_blank">
                        {{ scope.row.name }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="情况"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="minTemp"
                    label="最低温度"
                    width="120"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="maxTemp"
                    label="最高温度"
                    width="120"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="avgMinTemp"
                    label="平均最低温度"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="avgMaxTemp"
                    label="平均最高温度"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="midMinTemp"
                    label="最低温度中位数"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="midMaxTemp"
                    label="最高温度中位数"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="varMinTemp"
                    label="最低温度方差"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="varMaxTemp"
                    label="最高温度方差"
                    width="140"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="chak"
                    label="查看图表"
                    align="center"
            >
                <template slot-scope="scope">
                    <el-link type="primary" @click="openDialog(scope.row)">
                        查看
                    </el-link>
                </template>
            </el-table-column>
        </el-table>
    </div>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://npm.elemecdn.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://npm.elemecdn.com/element-ui/lib/index.js"></script>
<!-- import Axios -->
<script src="https://npm.elemecdn.com/axios/dist/axios.min.js"></script>
<script>
    // Vue.use(ElementUI)
    new Vue({
        el: '#app',
        methods: {
            openDialog(row) {
                this.dialogData = row
                this.dialogVisible = true
            }
        },
        data: {
            dialogData: {
                id: '',
                name: '',
                status: '',
                avgMinTemp: '',
                avgMaxTemp: '',
                midMinTemp: '',
                midMaxTemp: '',
                varMinTemp: '',
                varMaxTemp: '',
            },
            dialogVisible: false,
            tableData: [
                (% for cityData in data %)
                    {
                        id: '(( cityData.id ))',
                        name: '(( cityData.name ))',
                        status: '(( cityData.status ))',
                        minTemp: '(( cityData.minTemp ))',
                        maxTemp: '(( cityData.maxTemp ))',
                        avgMinTemp: '(( cityData.avgMinTemp ))',
                        avgMaxTemp: '(( cityData.avgMaxTemp ))',
                        midMinTemp: '(( cityData.midMinTemp ))',
                        midMaxTemp: '(( cityData.midMaxTemp ))',
                        varMinTemp: '(( cityData.varMinTemp ))',
                        varMaxTemp: '(( cityData.varMaxTemp ))',
                    },
                (% endfor %)
            ]
        }
    })
</script>
</html>